<template>
  <div class="sale" ww3  auto>

    <div  fz-16 grey style="margin-bottom: 2%">
      共有<i>1</i>条浏览记录
    </div>



    <div class="sale-table">

      <el-table
          :data="tableData"
          style="width: 100%"
          height="auto"
          :default-sort = "{prop: 'date', order: 'descending'}"
      >
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>

        <el-table-column
            fixed
            prop="name"
            label="素材"
            width="290"
        >
          <template slot-scope="scope">
            <dl class="table-img" pos-a>
              <dt pos-a>
                <p pos-b ww1 style="left: 10px">
                  时尚潮流炫酷快闪模板
                </p>
                <el-image
                    ww1
                    :src="scope.row.name"
                    fit="cover"

                >
                </el-image>
              </dt>
              <dd pos-b flex flex-b flex-c ww1 >
                1920*1080
                <span>00:32</span>
              </dd>
            </dl>
          </template>
        </el-table-column>

        <el-table-column
            prop="date"
            label="创作人"
            width="130">
          白羊星传媒
        </el-table-column>

        <el-table-column
            prop="date"
            label="模版类型"
            width="130">
          AE模板
        </el-table-column>

        <el-table-column
            prop="city"
            label="下载"
            width="130">
        </el-table-column>
        <el-table-column
            prop="address"
            label="售价（元）"
            width="130">

        </el-table-column>
        <el-table-column
            prop="zip"
            label="收益"
            width="130">
        </el-table-column>

        <el-table-column
            prop="date2"
            label="发布时间"
            width="130">
        </el-table-column>

        <el-table-column

            label="操作"
            width="150">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <div flex  ww1 style="justify-content: center;">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: "Collection",
  data() {
    return {
      radio: '1',
      input2:'',
      id: '1234',
      tableData: [{
        date: '100',
        name: 'https://pic.vjshi.com/2021-01-27/0438e08167daaf27ab262ce1f61393ef/online/main.jpg?x-oss-process=style/resize_w_285',
        province: '炫酷',
        city: '3000',
        address: '45',
        zip: 203,
        date2: '2021-11-01',
        per:'黄千惠',
        card:'450***********23',
        satus: 1,
      }],

      checkList:[]
    }
  },

  methods: {
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },

    handleEdit(row) {
      this.$router.push({
        name: 'EditPro',
        params: {
          id: row.id
        }
      })
    }


  }


}
</script>

<style scoped>
.sale-table >>> .el-table th.el-table__cell>.cell{
  color: #050404;
}
.sale-table{
  margin-bottom: 2%;
}
.sale >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #e74b3c ;
}
.sale-bar p span{padding-right: 3%;}
.sale-bar-r{
  width: 45%;
}
.action-wap{

}
</style>